<template>
  <div class="form">
    <el-form ref="resetForm" :model="resetForm" :rules="rules" status-icon label-width="100px">
      <el-form-item label="设置密码：" prop="password" width="150px">
        <el-input v-model="resetForm.password" type="password" auto-complete="off" show-password />
      </el-form-item>
      <el-form-item label="确认密码：" prop="checkPass">
        <el-input v-model="resetForm.checkPass" type="password" auto-complete="off" show-password />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click.native.prevent="toAmend">确认密码</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { setPassword } from '@/api/api'
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.resetForm.checkPass !== '') {
          this.$refs.resetForm.validateField('checkPass')
        }
        callback()
      }
    }

    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.resetForm.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      resetForm: {
        // 传给后台所需要的参数
        password: '',
        checkPass: ''
      },
      rules: {
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { pattern: /^\w{6,16}$/, min: 6, max: 16, message: '请输入6-16位的字母、数字、下划线的密码', trigger: 'blur' },
          { validator: validatePass, trigger: 'blur' }
        ],
        checkPass: [
          { required: true, message: '请再次输入密码', trigger: 'blur' },
          { validator: validatePass2, trigger: 'blur', required: true }
        ]
      }
    }
  },
  methods: {
    toAmend() {
      this.$refs.resetForm.validate(valid => {
        if (valid) {
          setPassword({ 'newPassword1': this.resetForm.password, 'newPassword2': this.resetForm.checkPass }).then(res => {
            if (res.data.responseStatusCode == 200) {
              console.log('res.data.message', res.data.message)
              this.$message({
                message: res.data.message,
                type: 'success'
              })
            } else if (res.data.responseStatusCode == 408) {
              localStorage.removeItem('token')
              localStorage.removeItem('role')
              localStorage.removeItem('username')
              localStorage.removeItem('bankCard')
              this.$router.push(`/login?redirect=${this.$route.fullPath}`)
              this.$message({
                showClose: true,
                message: res.data.message,
                type: 'error'
              })
            } else {
              this.$message.error(res.data.message)
            }
          })
        } else {
          return
        }
      })
    }

  }
}
</script>

<style lang="scss" scoped>
.form {
  width: 30%;
  margin: 40px 30px;
}
</style>
